<div id="component-form-step-4">
    <table class="layui-table" lay-size="sm">
        <colgroup>
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>产品属性名称</th>
            <th>商品属性数据</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>产品名称</td>
            <td :style="{color:title_color}">{{title}}</td>
        </tr>
        <tr>
            <td>产品型号</td>
            <td>{{model}}</td>
        </tr>
        <tr>
            <td>产品库存</td>
            <td>{{inventory}}{{inventory_unit}}</td>
        </tr>
        <tr>
            <td>产品原价</td>
            <td>{{original_price}}({{min_original_price}}~{{max_original_price}})</td>
        </tr>
        <tr>
            <td>产品售价</td>
            <td>{{price}}({{min_price}}~{{max_price}})</td>
        </tr>
        <tr>
            <td>赠送积分</td>
            <td>{{give_integral}}</td>
        </tr>
        <tr>
            <td>起购数</td>
            <td>{{buy_min_number}}~{{buy_max_number}}</td>
        </tr>
        <tr>
            <td>产品品牌</td>
            <td>{{brand_name}}</td>
        </tr>
        <tr>
            <td>产品类型</td>
            <td>{{category1_name}} {{category2_name}} {{category3_name}}</td>
        </tr>
        <tr>
            <td>首页图片</td>
            <td>
                <div class="layui-inline">
                    <img :src="home_recommended_images" width="200">
                </div>
            </td>
        </tr>
        <tr>
            <td>封面图片</td>
            <td>
                <div class="layui-inline">
                    <img :src="images" width="200">
                </div>
            </td>
        </tr>
        <tr>
            <td>图片预览</td>
            <td>
                <div class="layui-inline" v-for="image in product_images">
                    <img :src="image" width="200">
                </div>
            </td>
        </tr>
        <tr>
            <td>规格列表</td>
            <td>
                <table class="layui-table" lay-size="sm">
                    <colgroup>
                        <col width="200" v-for="(col,i) in cols" v-if="cols.length>0">
                        <col width="150">
                        <col width="250">
                        <col width="250">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th v-for="(col,i) in cols" v-if="cols.length>0">
                            {{col.value}}
                        </th>
                        <th>产品主图</th>
                        <th>价格</th>
                        <th>型号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(row,i) in rows">
                        <td v-for="(col,ii) in cols" v-if="cols.length>0">
                            {{row.cols[ii]}}
                        </td>
                        <td>
                            <p>
                                <img :src="row.images" width="30" height="30" v-if="!!row.images">
                            </p>
                        </td>
                        <td>
                            <div class="layui-form-item">
                                市场销售价格: {{row['price']}}
                            </div>
                            <div class="layui-form-item">
                                原价: {{row['original_price']}}
                            </div>
                        </td>
                        <td>
                            <div class="layui-form-item">
                                重量（kg）: {{row['weight']}}
                            </div>
                            <div class="layui-form-item">
                                编码: {{row['coding']}}
                            </div>
                            <div class="layui-form-item">
                                条形码: {{row['barcode']}}
                            </div>
                            <div class="layui-form-item">
                                库存: {{row['inventory']}}
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>商品详情</td>
            <td>
                <div v-html="content_web" style="height: 200px;overflow: auto;"></div>
            </td>
        </tr>
        </tbody>
    </table>
    <p style="text-align: center;"><button class="layui-btn" @click.stop.prevent="save">保存</button></p>
</div>
<!--<div id="product-submit-loading" class="product-submit" style="display: none;">-->
<!--<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>-->
<!--正在提交数据...-->
<!--</div>-->
<!--<div id="product-submit-success" class="product-submit" style="display: none;">-->
<!--保存成功-->
<!--</div>-->
<!--<div id="product-submit-error" class="product-submit" style="display: none;">-->
<!--保存失败-->
<!--</div>-->
<script>
    (function () {
        // 初始化一个VUE对象
        var add_step4 = new Vue({
            'el': '#component-form-step-4',
            'data': {
                // step1
                title : '',
                title_color : '',
                inventory : '',
                inventory_unit : '',
                brand_id : '',
                brand_name : '',
                category1 : '',
                category1_name : '',
                category2 : '',
                category2_name : '',
                category3 : '',
                category3_name : '',
                product_images : [],
                model : '',
                images : '',
                original_price : '',
                min_original_price : '0.00',
                max_original_price : '0.00',
                price : '',
                min_price : '0.00',
                max_price : '0.00',
                give_integral : '0',
                buy_min_number : '1',
                buy_max_number : '0',
                is_deduction_inventory : '1',
                is_shelves : '1',
                is_home_recommended : '0',
                photo_count : '0',
                attr_list : [],
                region_type : '0',
                region_list : [],
                home_recommended_images : '',

                // step2
                rows:[],
                cols:[],

                // step3
                content_web:''
            },
            methods : {
                save : function () {
                    // var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒
                    // 关闭
                    // layer.close(index);
                    var layerLoading;
                    var data = {
                        // method:'commodity.Save.index',
                        action:"{$commParam['info']===null?'add':'edit'}"
                    };
                    if(!!commParam['info']){
                        data.id = commParam['info']['id'];
                    }
                    // step1
                    data.title=''+add_step1.title;
                    data.title_color=''+add_step1.title_color;
                    data.inventory=''+add_step1.inventory;
                    data.inventory_unit=''+add_step1.inventory_unit;
                    data.brand_id=''+add_step1.brand_id;
                    data.brand_name=''+add_step1.brand_name;
                    data.category1=''+add_step1.category1;
                    data.category2=''+add_step1.category2;
                    data.category3=''+add_step1.category3;
                    data.category1_name=''+add_step1.category1_name;
                    data.category2_name=''+add_step1.category2_name;
                    data.category3_name=''+add_step1.category3_name;
                    data.photo_list=JSON.stringify(add_step1.product_images);
                    data.model=''+add_step1.model;
                    data.images=''+add_step1.images;
                    data.original_price=''+add_step1.original_price;
                    data.min_original_price=''+add_step1.min_original_price;
                    data.max_original_price=''+add_step1.max_original_price;
                    data.price=''+add_step1.price;
                    data.min_price=''+add_step1.min_price;
                    data.max_price=''+add_step1.max_price;
                    data.give_integral=''+add_step1.give_integral;
                    data.buy_min_number=''+add_step1.buy_min_number;
                    data.buy_max_number=''+add_step1.buy_max_number;
                    data.is_deduction_inventory=''+add_step1.is_deduction_inventory;
                    data.is_shelves=''+add_step1.is_shelves;
                    data.is_home_recommended=''+add_step1.is_home_recommended;
                    data.photo_count=''+add_step1.photo_count;
                    data.attr_list=JSON.stringify(add_step1.attr_list);
                    data.region_type=''+add_step1.region_type;
                    data.region_list=JSON.stringify(add_step1.region_list);
                    data.home_recommended_images=''+add_step1.home_recommended_images;
                    data.sales_count=''+add_step1.sales_count;
                    data.access_count=''+add_step1.access_count;
                    data.is_delete_time=''+add_step1.is_delete_time;
                    data.video=''+add_step1.video;

                    // step2
                    data.rows=JSON.stringify(add_step2.rows);
                    data.cols=JSON.stringify(add_step2.cols);

                    // step3
                    data.content_web=add_step3_ue.html();
                    $.ajax({
                        url : "{:get_url('/admin/commodity/save')}",
                        // url : "/openapi.php",
                        type : 'post',
                        data : data,
                        // headers : {
                        //     'Debug-Password' : 'jxb123456'
                        // },
                        beforeSend : function () {
                            console.log("add goods before");
                            var errorArr = [];
                            var errorCls = 'red';
                            // for(var k in data)
                            // {
                            //     if(k!='video' && !data[k]){
                            //         errorArr.push('<li class="layui-bg-'+errorCls+'">保存失败：【'+k+'】必填</li>');
                            //     }
                            // }
                            if(errorArr.length > 0){
                                layer.open({
                                    title:'出错啦',
                                    type: 1,
                                    content: '<ol style="padding: 5px;">'+errorArr.join("")+'</ol>',
                                    btn: ['确定']
                                });
                                return false;
                            }

                            layerLoading = layer.load();
                        },
                        success : function (ret) {
                            console.log(ret);
                            if(ret.code == 200){
                                layer.msg('保存成功，正在刷新...', {
                                    icon: 1
                                    ,time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                },function () {
                                    window.location.href="{:get_url('/admin/commodity/save')}?id="+ret.data.goods_id;
                                });
                            }else{
                                layer.msg(ret.msg, {icon: 2});
                            }
                        },
                        complete : function () {
                            layer.close(layerLoading);
                        }
                    });
                }
            }
        });

        window.add_step4 = add_step4;
    })();
    var add_step4_init = function () {
        // step1
        add_step4.title=add_step1.title;
        add_step4.title_color=add_step1.title_color;
        add_step4.inventory=add_step1.inventory;
        add_step4.inventory_unit=add_step1.inventory_unit;
        add_step4.brand_id=add_step1.brand_id;
        add_step4.brand_name=add_step1.brand_name;
        add_step4.category1=add_step1.category1;
        add_step4.category2=add_step1.category2;
        add_step4.category3=add_step1.category3;
        add_step4.category1_name=add_step1.category1_name;
        add_step4.category2_name=add_step1.category2_name;
        add_step4.category3_name=add_step1.category3_name;
        add_step4.product_images=add_step1.product_images;
        add_step4.model=add_step1.model;
        add_step4.images=add_step1.images;
        add_step4.original_price=add_step1.original_price;
        add_step4.min_original_price=add_step1.min_original_price;
        add_step4.max_original_price=add_step1.max_original_price;
        add_step4.price=add_step1.price;
        add_step4.min_price=add_step1.min_price;
        add_step4.max_price=add_step1.max_price;
        add_step4.give_integral=add_step1.give_integral;
        add_step4.buy_min_number=add_step1.buy_min_number;
        add_step4.buy_max_number=add_step1.buy_max_number;
        add_step4.is_deduction_inventory=add_step1.is_deduction_inventory;
        add_step4.is_shelves=add_step1.is_shelves;
        add_step4.is_home_recommended=add_step1.is_home_recommended;
        add_step4.photo_count=add_step1.photo_count;
        add_step4.attr_list=add_step1.attr_list;
        add_step4.region_type=add_step1.region_type;
        add_step4.region_list=add_step1.region_list;
        add_step4.home_recommended_images=add_step1.home_recommended_images;


        // step2
        add_step4.rows=add_step2.rows;
        add_step4.cols=add_step2.cols;

        // step3
        add_step4.content_web=add_step3_ue.html();
    };
    // var add_step4_save = function () {
    //     function loading(msg) {
    //         $('.product-submit').hide().closest('#product-submit-loading').html(msg||'<i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>正在提交数据...').show();
    //     }
    //     function success(msg) {
    //         $('.product-submit').hide().closest('#product-submit-success').html(msg||'<div class="layui-bg-green">保存成功</div>').show();
    //     }
    //     function error(msg) {
    //         $('.product-submit').hide().closest('#product-submit-error').html(msg||'<div class="layui-bg-red">保存失败</div>').show();
    //     }
    //     function closeAll() {
    //         $('.product-submit').hide();
    //     }
    //
    //     $('.product-submit').hide().closest('#product-submit-loading').show();
    // };
</script>